<template>
  <div>
    <!-- 展示区域 -->
    <el-row>
      <el-col>
        <el-button type="primary"> 添加分类 </el-button>
      </el-col>
    </el-row>
    <!-- 表格 区域-->

    <el-table
      class="biaoge"
      :data="shuju.object"
      style="width: 100%; margin-bottom: 20px"
      row-key="cat_id"
      border
    >
      <el-table-column prop="cat_name" label="分类名称" width="180" />
      <!-- <el-table-column prop="cat_level" label="分类名称" width="180" /> -->
      <el-table-column prop="cat_deleted" label="是否有效">
        <template #default="scope">
          <el-tag v-if="scope.row.cat_deleted == false" type="success"
            >有效</el-tag
          >
          <el-tag v-else type="danger">无效</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="cat_level" label="排序">
        <template #default="scope">
          <el-tag
            class="ml-2"
            type="danger"
            effect="plain"
            color="#f9f0ff"
            v-if="scope.row.cat_level == 0"
            >一级</el-tag
          >
          <el-tag
            class="ml-3"
            type="danger"
            effect="plain"
            color="#e6f7ff"
            v-else-if="scope.row.cat_level == 1"
            >二级</el-tag
          >
          <el-tag
            class="ml-4"
            type="danger"
            effect="plain"
            color="#e6fffb"
            v-else
            >三级</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-row>
            <el-button type="primary" size="small">编辑</el-button>
            <el-button type="danger" size="small" plain>删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:currentPage="cool.pagenum"
        v-model:page-size="cool.pagesize"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout=" prev, pager, next"
        :total="toto"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { apis } from '@/http/api';

//商品数据
const shuju = reactive({
  object: null as any,
});

//分页
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  //监听页数变化
  cool.pagesize = val;
  huoqu();
};
const handleCurrentChange = (val: number) => {
  //监听页吗变化
  cool.pagenum = val;
  huoqu();
};
//请求参数的选项
const cool = reactive({
  type: 3,
  pagenum: 1,
  pagesize: 10,
});
//总数据条数
const toto = ref(0);
//获取数据
const huoqu = () => {
  apis.getcategories(cool).then((data) => {
    if (data.meta.status !== 200) {
      return console.log('获取失败', data);
    }
    shuju.object = data.data.result;
    toto.value = data.data.total;
    console.log(shuju.object);
  });
};
//初始化数据
onMounted(() => {
  huoqu();
});
</script>

<style lang="less" scoped>
.ml-2 {
  color: #531dab;
  border: 1px solid #d3adf7;
}
.ml-3 {
  color: #096dd9;
  border: 1px solid #91d5ff;
}
.ml-4 {
  color: #08979c;
  border: 1px solid #87e8de;
}
.biaoge {
  margin-top: 15px;
  margin-bottom: 15px;
}
.el-pagination {
  justify-content: end;
}
.el-pager {
  justify-content: space-around;
}
::v-deep .el-pager li {
  margin: 0 9px;
}
</style>
